import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import {observable,action,toJS} from 'mobx';
import {Checkbox, Tooltip, Button, Modal} from 'antd'




import weaBlogDict from '../../../Component/wea-blog-dict';
const innerHref = weaBlogDict.href;
const confirm = Modal.confirm;

import { WeaLocaleProvider,WeaAvatar } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@inject('blogMyBlog')
@observer
class ShareToMe extends Component {
    constructor(props) {
        super(props)
        const {groupId, groupName} = props.data
        this.state = {
            selectVisible: false,
            checkValue: false,
            attentionOperation :{icon: "icon-blog-AlreadyConcern", text: getLabel('26941',"申请关注")},
            attentionStatus:'3'
            //attentionOperation : {icon: "icon-blog-CancelConcern", text: getLabel('26938',"取消关注")}
        }
    }

    componentWillReceiveProps(props) {
        const {checked, groupId, groupName} = props.data
        this.setState({
            checkValue: checked,
        })
    }

    render() {
        const {data, onCheck} = this.props,
            {checkValue, selectVisible} = this.state,
            {deptName, imageUrl, username, attentionMeStatus,attentionStatus, userId, islower, isreceive} = data,
            groupList = this.props.groups
        let attentionOperation = null,
            attentionDesc = null
        let groupsArray = []
        if (data.groups) {
            data.groups.forEach(
                item => {
                    groupsArray.push(item.groupName)
                }
            )
        }
        if(attentionStatus=="3"){
            attentionOperation ={icon: "icon-blog-AlreadyConcern", text: getLabel('26941',"申请关注")}
        }else{
            attentionOperation ={icon: "icon-blog-CancelConcern", text: getLabel('26938',"取消关注")}
        }

        const style = {
            width: 70,
            height: 70,
            display: "inline-block"
        };
        return (
            <div className="wea-fans-fan">
                <div className="wea-ff-top">
                    {
                        attentionDesc ? (
                            <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@ima0aq`} class="wea-tool-tip" placement="right" title={attentionDesc.text}>
                                <span className={"wea-fft-icon " + attentionDesc.icon}/>
                            </Tooltip>
                        ) : ""
                    }
                    {
                        onCheck ? (
                            attentionStatus=="3"?
                            <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@38aeim`}
                                className="wea-fft-check"
                                checked={checkValue}
                                onChange={onCheck.bind(null, userId)}
                            />:""
                        ) : ""
                    }
                </div>
                <ul className="wea-ff-content">
                    <li className="wea-ffc-item wea-ffc-icon">
                        <a href={innerHref.blog(userId)} target="_blank">
                            <span style={style}>
                            <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@ebxosg`}  userId={userId}/>
                            </span>
                        </a>
                    </li>
                    <li className="wea-ffc-item wea-ffc-name"><a href={innerHref.blog(userId)} target="_blank">{username}</a></li>
                    <li className="wea-ffc-item wea-ffc-department">{deptName}</li>
                    {
                        groupList ? (
                            <li className="wea-ffc-item wea-ffc-group">
                             
                            </li>
                        ) : ""
                    }
                    {
                      
                    <li className={"wea-ffc-item wea-ffc-operation "}
                        onClick={
                                () => this.changeConcern(userId, attentionStatus || attentionMeStatus, islower)
                        }
                    >
                        <span className={"wea-ffco-icon " +  attentionOperation.icon}/>
                        <span className="wea-ffco-text">&nbsp;&nbsp;&nbsp;&nbsp;{attentionOperation.text}</span>
                    </li>
                       
                    }
                </ul>
            </div>
        )
    }

    changeConcern = (userId, attentionStatus, islower) => {
		const {type,cancelAttionCount} = this.props
        const {editFan, getBasicInfo, editShareToMe} = this.props.blogMyBlog
        if(attentionStatus == 1 || attentionStatus == 2) {
            confirm({
                title: getLabel('384420',"确认要取消关注吗？"),
                content: '',
                onOk() {
                    editShareToMe(
                        {
                            userId: userId,
                            attentionStatus: attentionStatus,
                            islower: islower,
                            type:'share',
                            weiBoPage:'1'
                        },
                        result => {
                            if (result.status == "1") {
                                getBasicInfo();
                          
                                
                            }
                        }
                    )
                },
                onCancel() {},
            });
        } else {
            let isSelect = this.state.checkValue;
            editShareToMe(
                {
                    userId: userId,
                    attentionStatus: attentionStatus,
                    islower: islower,
                    type:'share',
                    weiBoPage:'1'
                },
                result => {
                    if (result.status == "1") {
                        getBasicInfo()
                        if(isSelect){
                            cancelAttionCount();
                        }
                    }
                }
            )
        }
			
    }

    resetGroup = () => {
        let {resetGroup, getWeiboGroup, getAttentionList} = this.props.blogMyBlog
        let ref = this.refs.checkboxDropdown.wrappedInstance,
            {data, group} = this.props,
            destGroup = ref.value
        if(this.refs.checkboxDropdown.wrappedInstance){
            ref = this.refs.checkboxDropdown.wrappedInstance
        }else{
            ref = this.refs.checkboxDropdown
        }

        if (destGroup.length == 0) destGroup = ["nogroup"]
        resetGroup(
            {userId: data.userId, destGroup: destGroup.join(",")},
            result => {
                if (result.status == "1") {
                    getWeiboGroup()
                    getAttentionList({groupId: group.groupId})
                }
            }
        )
        ref.visible = false
    }

    createAndMoveGroup = (groupName) => {
        let {createAndMoveGroup, getWeiboGroup, getAttentionList} = this.props.blogMyBlog
        
        let {data, group} = this.props
        createAndMoveGroup(
            {idSet: data.userId, sourceGroup: group.groupId, groupName: groupName},
            result => {
                if (result.status == "1") {
                    getWeiboGroup()
                    getAttentionList({groupId: group.groupId})
                }
            }
        )
    }
}

export default ShareToMe